<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面</title>
    <base th:href="${#httpServletRequest.getContextPath()} + '/'">
    <!-- 引入 layui.css -->
    <link rel="stylesheet" th:href="@{layui/css/layui.css}" href="../../../layui/css/layui.css">
    <!-- 引入 layui.js -->
    <script th:src="@{layui/layui.js}" src="../../../layui/layui.js"></script>
    <link rel="stylesheet" th:href="@{css/welcome.css}" href="../../../css/welcome.css">
</head>
<body>

<div class="layui-row">
    <div class="layui-col-xs8">
        <div class="panel panel-default">
            <div class="layui-carousel" id="carousel" lay-filter="carousel">
                <div carousel-item="">
                    <div><img src="images/carousel/1.jpeg" alt="1" width="100%" height="484px"></div>
                    <div><img src="images/carousel/2.jpeg" alt="2" width="100%" height="409px"></div>
                    <div><img src="images/carousel/3.jpeg" alt="3" width="100%" height="453px"></div>
                    <div><img src="images/carousel/4.jpeg" alt="4" width="100%" height="438px"></div>
                    <div><img src="images/carousel/5.jpeg" alt="5" width="100%" height="545px"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs4">
        <div class="panel panel-default comment-panel">
            <div class="panel-header">
                <span>公告</span>
                <a style="float: right" href="javascript:checkNotices()">查看更多</a>
            </div>
            <div style="height: 372px;overflow-y: scroll;">
                <table class="layui-table">
                    <colgroup>
                        <col width="80">
                        <col width="210">
                        <col width="80">
                    </colgroup>
                    <thead>
                    <tr>
                        <th style="text-align: center">标题</th>
                        <th style="text-align: center">主题</th>
                        <th style="text-align: center">发布者</th>
                    </tr>
                    </thead>
                    <tbody class="layui-text">
                    <tr th:each="notice:${noticeVOList}">
                        <td th:text="${notice.name}">标题</td>
                        <td><a href="#" th:href="${'notice/read/page.html?id='}+${notice.id}" th:text="${notice.title}"
                               target="_blank">主题</a></td>
                        <td th:text="${notice.username}">发布者</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="layui-row">
    <div class="layui-col-xs8">
        <div class="wrap-container welcome-container">
            <div class="row">
                <div class="welcome-left-container col-lg-12">
                    <div class="data-show">
                        <ul class="clearfix">
                            <li class="col-sm-12 col-md-2 col-xs-12"
                                style="padding-left: 0;padding-right: 9px;margin-bottom: 0">
                                <a href="javascript:;" class="clearfix">
                                    <div class="icon-bg bg-green f-l">
                                        <div style="margin-top: 4px">
                                            <i class="layui-icon layui-icon-username"
                                               style="font-size: 40px;color: white;"></i>
                                        </div>
                                    </div>
                                    <div class="right-text-con">
                                        <p class="name">用户数</p>
                                        <p><span class="color-org" th:text="${userCount}">89</span></p>
                                    </div>
                                </a>
                            </li>
                            <li class="col-sm-12 col-md-2 col-xs-12"
                                style="padding-left: 0;padding-right: 9px;margin-bottom: 0">
                                <a href="javascript:;" class="clearfix">
                                    <div class="icon-bg bg-blue f-l">
                                        <div style="margin-top: 4px">
                                            <i class="layui-icon layui-icon-group"
                                               style="font-size: 40px;color: white;"></i>
                                        </div>
                                    </div>
                                    <div class="right-text-con">
                                        <p class="name">部门数</p>
                                        <p><span class="color-org" th:text="${deptCount}">8</span></p>
                                    </div>
                                </a>
                            </li>
                            <li class="col-sm-12 col-md-2 col-xs-12"
                                style="padding-left: 0;padding-right: 9px;margin-bottom: 0">
                                <a href="javascript:;" class="clearfix">
                                    <div class="icon-bg bg-violet f-l">
                                        <div style="margin-top: 4px">
                                            <i class="layui-icon layui-icon-chat"
                                               style="font-size: 40px;color: white;"></i>
                                        </div>
                                    </div>
                                    <div class="right-text-con">
                                        <p class="name">职位数</p>
                                        <p><span class="color-org" th:text="${jobCount}">20</span></p>
                                    </div>
                                </a>
                            </li>
                            <li class="col-sm-12 col-md-2 col-xs-12"
                                style="padding-left: 0;padding-right: 9px;margin-bottom: 0">
                                <a href="javascript:;" class="clearfix">
                                    <div class="icon-bg bg-pink f-l">
                                        <div style="margin-top: 4px">
                                            <i class="layui-icon layui-icon-friends"
                                               style="font-size: 40px;color: white;"></i>
                                        </div>
                                    </div>
                                    <div class="right-text-con">
                                        <p class="name">员工数</p>
                                        <p><span class="color-org" th:text="${employeeCount}">50</span></p>
                                    </div>
                                </a>
                            </li>
                            <li class="col-sm-12 col-md-2 col-xs-12"
                                style="padding-left: 0;padding-right: 9px;margin-bottom: 0">
                                <a href="javascript:;" class="clearfix">
                                    <div class="icon-bg bg-red f-l">
                                        <div style="margin-top: 4px">
                                            <i class="layui-icon layui-icon-star"
                                               style="font-size: 40px;color: white;"></i>
                                        </div>
                                    </div>
                                    <div class="right-text-con">
                                        <p class="name">角色数</p>
                                        <p><span class="color-org" th:text="${roleCount}">15</span></p>
                                    </div>
                                </a>
                            </li>
                            <li class="col-sm-12 col-md-2 col-xs-12"
                                style="padding-left: 0;padding-right: 9px;margin-bottom: 0">
                                <a href="javascript:;" class="clearfix">
                                    <div class="icon-bg bg-yellow f-l">
                                        <div style="margin-top: 4px">
                                            <i class="layui-icon layui-icon-file"
                                               style="font-size: 40px;color: white;"></i>
                                        </div>
                                    </div>
                                    <div class="right-text-con">
                                        <p class="name">文件数</p>
                                        <p><span class="color-org" th:text="${uploadFileCount}">123</span></p>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-xs4">
        <!--联系-->
        <div class="panel panel-default contact-panel" style="margin-top: 15px">
            <div class="panel-header">联系我们</div>
            <div class="panel-body" style="padding-top: 5px;padding-bottom: 5px">
                <p>QQ：1156999641</p>
                <p>E-mail:1156999641@qq.com</p>
            </div>
        </div>
    </div>
</div>


</body>

<script>
    layui.use(['carousel'], function () {
        const carousel = layui.carousel;

        //改变下时间间隔、动画类型、高度
        carousel.render({
            elem: '#carousel'
            , interval: 3000
            , anim: 'fade'
            , height: '409px'
            , width: '860px'
        });
    });

    function checkNotices() {
        let a = layui.$(window.parent.document.getElementById('checkNotices'));
        a[0].click()
    }
</script>
</html>